<template>
  <div class="chat-toolbar">
    <b class="chat-toolbar-title" :title="session.name">{{ session.name || '' }}</b>
    <div class="chat-toolbar-actions">
      <i
        :title="fullscreen ? '还原' : '最大化'"
        :class="['chat-toolbar-action', fullscreen ? 'el-icon-copy-document' : 'el-icon-full-screen']"
        @click="toggleFullscreen"></i>
      <i v-if="closeable" title="关闭" class="chat-toolbar-action el-icon-close" @click="close"></i>
    </div>
    <div class="chat-toolbar-menu">
      <span :class="['chat-toolbar-menu-item', { active: tab === 'chat' }]" @click="tab = 'chat'">聊天</span>
      <span
        v-show="session && session.id"
        :class="['chat-toolbar-menu-item', { active: tab === 'file' }]"
        @click="tab = 'file'"
        >文件</span
      >
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ChatToolbar',
    props: {
      session: {
        type: Object,
        default: () => {}
      },
      closeable: {
        type: Boolean,
        default: false
      },
      fullscreen: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        tab: 'chat'
      }
    },
    watch: {
      tab(newVal) {
        this.$emit('tab-change', newVal)
      }
    },
    methods: {
      toggleFullscreen() {
        this.$emit('update:fullscreen', !this.fullscreen)
      },
      close() {
        this.$emit('close')
      }
    }
  }
</script>

<style lang="scss">
  .chat-toolbar {
    @include flex-not-shrink;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #e0e0e0;

    .chat-toolbar-title {
      @include ellipsis(1);
      height: 20px;
      line-height: 20px;
    }

    .chat-toolbar-actions {
      position: absolute;
      top: 6px;
      right: 6px;
      display: inline-block;
      line-height: 0;

      .chat-toolbar-action {
        align-self: center;
        margin-right: 10px;
        cursor: pointer;

        &:hover {
          color: var(--color-primary);
        }

        &.el-icon-close {
          &:hover {
            color: #f00;
          }
        }

        &:first-child {
          font-size: 13px;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }

    .chat-toolbar-menu {
      @include flex-not-shrink;
      position: absolute;
      right: 6px;
      bottom: 3px;

      .chat-toolbar-menu-item {
        margin-left: 14px;
        cursor: pointer;

        &.active {
          color: var(--color-primary);
          font-weight: bold;
        }
      }
    }
  }
</style>
